<script setup>
import { ref } from 'vue'
import "cesium/Build/Cesium/Widgets/widgets.css"
import "cesium"
import * as Cesium from "cesium";
import { Viewer } from "cesium";
import myImage from '../assets/logo.png'; // 确保路径正确指向你的图片文件

const options = {
  baseLayerPicker: true, // 基础影响图层选择器
  navigationHelpButton: false, // 导航帮助按钮
  animation: false, // 动画控件
  timeline: false, // 时间控件
  shadows: false, // 显示阴影
  shouldAnimate: false, // 模型动画效果 大气
  // skyBox: false as unknown as Cesium.SkyBox, // 天空盒
  skyBox: false,
  infoBox: false, // 显示 信息框
  fullscreenButton: false, // 是否显示全屏按钮
  homeButton: true, // 是否显示首页按钮
  geocoder: false, // 默认不显示搜索栏地址
  sceneModePicker: true, // 是否显示视角切换按钮
  //地图选择
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    // url: "http://webst01.is.autonavi.com/app，aptitle?style=6&x={x}&y={y}&z={z}",
    url:"http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    maximumLevel: 18,
    minimumLevel: 1
  })
}

// 初始化Map
const viewer = new Viewer("app", options);
const cC = viewer.cesiumWidget.creditContainer
cC.style.display = 'none' // 影藏logo 
 

// 设置默认相机视角
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(121.563135,45.398952, 1000),
  // 方向，俯视和仰视的视角
  orientation: {
    heading: Cesium.Math.toRadians(0),//坐标系旋转90度
    pitch: Cesium.Math.toRadians(-80),//设置俯仰角度为-45度
  }
})
// 创建图层对象并添加到Viewer 
const annLayer = new Cesium.UrlTemplateImageryProvider({
  url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
  minimumLevel: 1,
  maximumLevel: 18,
});

viewer.imageryLayers.addImageryProvider(annLayer);

// 假设您已经有了Cesium.Viewer实例叫做 'viewer'

// 创建一个图标实体数组
const entities = [
  {
    name: '位置1',
    position: Cesium.Cartesian3.fromDegrees(121.579232, 45.408965),
    billboard: {
      image: myImage, // 使用webpack的require方法来引入本地图片
      width: 30,  // 图片宽度,单位px
      height: 30, // 图片高度，单位px
      eyeOffset: new Cesium.Cartesian3(0, 0, -10),//与坐标位置的偏移距离 
      scale: 1,   // 缩放比例
    },
    // polyline:null
    polyline: { 
        positions: Cesium.Cartesian3.fromDegreesArray([121.579232, 45.408965, 121.573121, 45.342007,121.540121, 45.345007]),
        width: 3, // 线宽
        material: Cesium.Color.RED // 线的颜色
    }
  },
  {
    name: '位置2',
    position: Cesium.Cartesian3.fromDegrees(121.573121, 45.342007),
    billboard: {
      image: myImage,
      width: 30,  // 图片宽度,单位px
      height: 30, // 图片高度，单位px
      eyeOffset: new Cesium.Cartesian3(0, 0, -10),//与坐标位置的偏移距离 
      scale: 1,   // 缩放比例
    },
    polyline: { 
        positions: Cesium.Cartesian3.fromDegreesArray([121.573121, 45.342007,121.608219,45.368159]),
        width: 3, // 线宽
        material: Cesium.Color.RED // 线的颜色
    }
  },
  {
    name: '位置3',
    position: Cesium.Cartesian3.fromDegrees(121.540121, 45.345007),
    billboard: {
      image: myImage,
      width: 30,  // 图片宽度,单位px
      height: 30, // 图片高度，单位px
      eyeOffset: new Cesium.Cartesian3(0, 0, -10),//与坐标位置的偏移距离 
      scale: 1,   // 缩放比例
    },
    polyline:null
  },
  {
    name: '位置4',
    position: Cesium.Cartesian3.fromDegrees(121.608219,45.368159),
    billboard: {
      image: myImage,
      width: 30,  // 图片宽度,单位px
      height: 30, // 图片高度，单位px
      eyeOffset: new Cesium.Cartesian3(0, 0, -10),//与坐标位置的偏移距离 
      scale: 1,   // 缩放比例
    },
    polyline:null
  },
  // 添加更多位置...
];

// 添加实体到Cesium
entities.forEach(entity => {
  viewer.entities.add({
    name: entity.name,
    position: entity.position,
    point: entity.point,
    billboard: entity.billboard,
    polyline: entity.polyline 
  });
});
 
 
</script>

<template>
  <div class="scene" id="cesiumContainer">
  </div>
</template>
<style>
.scene {
  height: 100%;
  width: 100%;
}

/* .cesium-widget-credits{
  display: none !important;
} */
</style>
